<template>
  <div class="dialog-container">
    <el-button type="primary" @click="handleRefDialog">ref加载的弹框</el-button>
    <el-button type="primary" @click="handlePropDialog"
      >传值加载的弹框</el-button
    >
    <dialog-ref ref="dialogRef">
      <el-input v-model="value"></el-input>
    </dialog-ref>
    <dialog-prop-dialog
      :visible.sync="dialogShow"
      v-bind="dialogConfig"
      v-if="dialogShow"
    >
    </dialog-prop-dialog>
  </div>
</template>

<script>
import dialogRef from "./dialogRef.vue";
import dialogPropDialog from "./dialogPropDialog";
export default {
  components: { dialogRef, dialogPropDialog },
  data() {
    return {
      value: 10,
      dialogShow: false,
      dialogConfig: {
        title: "传值加载弹框",
        width: "1000px",
        ok: (val) => {
          this.handleOk2(val);
        },
      },
    };
  },
  created() {},
  mounted() {},
  methods: {
    handleRefDialog() {
      this.$refs.dialogRef.open({
        title: "测试ref弹框",
        width: "1230px",
        ok: this.handleOk,
        close: this.resetForm,
      });
    },

    handlePropDialog() {
      this.dialogShow = true;
    },

    handleOk() {
      return new Promise((resolve, reject) => {
        try {
          this.$message.success(
            "当前input框的值是" + this.value + "   弹框三秒后自动关闭"
          );
          setTimeout(() => {
            resolve();
          }, 3000);
        } catch {
          reject();
        }
      });
    },

    handleOk2(val) {
      return new Promise((resolve, reject) => {
        try {
          this.$message.success(
            "当前input框的值是" + val + "   弹框三秒后自动关闭"
          );
          setTimeout(() => {
            resolve();
          }, 3000);
        } catch {
          reject();
        }
      });
    },

    resetForm() {
      this.value = 10;
      return this.$nextTick();
    },
  },
};
</script>
<style lang="scss" scoped></style>
